<template>
	<view class="tarbar" :style="'padding-bottom:'+(bottomTabbar>0?bottomTabbar:6)+'px;'">
		<view class="tabbar-item" :class="{active: curNav == 0}" @click="selectIcon(0)" >
				
				<image class="tab-img tab-img1" src="../../static/tab/index_tab_hover.png" v-if="curNav == 0" mode="widthFix"></image>
				<image class="tab-img tab-img1" src="../../static/tab/index_tab.png" v-else mode="widthFix"></image>
				<view :class="curNav==0?'tabbar-name tabAct':'tabNo'">首页</view>
				
			</view>
			
			<!-- <view class="tabbar-item" :class="{active: curNav == 1}" @click="selectIcon(1)" >
				<image class="tab-img tab-img2" src="../../static/tab/jf_hover.png" v-if="curNav == 1" mode="widthFix"></image>
				<image class="tab-img tab-img2" src="../../static/tab/jf.png" v-else mode="widthFix"></image>
				<view class="tabbar-name">积分商城</view>
			</view> -->
			
		
		<view class="tabbar-item" :class="{active: curNav == 2}" @click="selectIcon(2)" >
			<image class="tab-img tab-img3" src="../../static/tab/order_tab_hover.png" v-if="curNav == 2" mode="widthFix"></image>
			<image class="tab-img tab-img3" src="../../static/tab/order_tab_hover.png" v-else mode="widthFix"></image>
			<view :class="curNav==2?'tabbar-name tabAct':'tabNo'">分销中心</view>
		</view>
		
		<!-- <view class="tabbar-item" :class="{active: curNav == 3}" @click="selectIcon(3)" >
			<image class="tab-img tab-img4" src="../../static/tab/or2_hover.png" v-if="curNav == 3" mode="widthFix"></image>
			<image class="tab-img tab-img4" src="../../static/tab/or2.png" v-else mode="widthFix"></image>
			<view class="tabbar-name">订单</view>
		</view> -->
		
			<view class="tabbar-item" :class="{active: curNav == 4}" @click="selectIcon(4)" >
				<image class="tab-img tab-img5" src="../../static/tab/mine_tab_hover.png" v-if="curNav == 4" mode="widthFix"></image>
				<image class="tab-img tab-img5" src="../../static/tab/mine_tab.png" v-else mode="widthFix"></image>
				<view :class="curNav==4?'tabbar-name tabAct':'tabNo'">我的</view>
			</view>
			
		</view>
</template>
<script>
var app = getApp();
export default {
    components: {
        'name': 'custom-tabbar'
    },
	props:{
		filter:Boolean,
		saleView:Boolean,
		curNav:Number,
		bottomTabbar:Number
	},
    data() {
        return {
        };
    },
    onLoad() {},
    methods: {
      selectIcon(index) {
				switch(index) {
					case 0:
						uni.switchTab({
							url:'/pages/index/index',
						})
					break;
					case 1:
						uni.switchTab({
							url:'/pages/integral/integral'
						})
					break;
					case 2:
						uni.switchTab({
							url:'/pages/distribution/distribution'
						})
					break;
					case 3:
						uni.switchTab({
							url:'/pages/order/order',
						})
					break;
					case 4:
						uni.switchTab({
							url:'/pages/my/my',
						})
					break;
				}
		},
        onGetPhoneNumber(e){
        	app.GetMobile(e,function(e){
        		console.log(e);
        		uni.switchTab({
        			url:'/pages/my/my'
        		})
        	});
        },
    }
};
</script>

<style scoped lang="scss">
button  {
	padding: 0!important;
	margin: 0!important;	
	background-color: #FFFFFF!important;
}
button::after {
	border:none!important;
	border-radius: 0;
}
.tarbar {
    width: 100vw;
	// height: 100rpx;
    z-index: 98;
	padding: 12rpx 0;
    position: fixed;
	left: 0;
	bottom: 0;
	background-color: #FFFFFF;
	display: flex;justify-content: space-around;
	align-items: center;
	border-top: 1rpx solid #F5F5F5;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	.tabbar-item {
		width: 50%;
		text-align: center;
		font-size: 18rpx;
		font-weight: 500;
		color: #333333;
		
		.tab-img {
			width: 48rpx!important;
			height: 48rpx!important;
			margin-bottom: 4rpx;
		}
		.tab-img1 {
			// width: 40rpx!important;
			// height: 40rpx!important;
			// margin-bottom: 4rpx;
		}
		.tab-img2 {
			// width: 40rpx!important;
			// height: 40rpx!important;
			// margin-bottom: 4rpx;
		}
		.tab-img3 {
			width: 60rpx!important;
			height: 60rpx!important;
			box-shadow: 2rpx 2rpx 16rpx rgba(255, 91, 77, 0.35);
			border-radius: 50%;
			// margin-bottom: 4rpx;
		}
		
		.tab-img4 {
			// width: 40rpx!important;
			// height: 40rpx!important;
			// margin-bottom: 4rpx;
		}
		.tab-img5 {
			// width: 40rpx!important;
			// height: 40rpx!important;
			// margin-bottom: 4rpx;
		}
		// .tab-img2{
		// 	width: 44rpx!important;
		// 	height: 40rpx!important;
		// 	margin-bottom: 4rpx;
		// }
		.tab-index-img {
			width: 72rpx!important;
			height: 72rpx!important;
		}
		// &.active {
		// 	color: #FA6400;
		// }
		.tabNo{
			color: #BBBABF;
		}
		.tabAct{
			color: #FC5327;
		}
	}
	
}

</style>